<template>
  <div class="webchat_node_management">
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="(item, index) in editableTabs"
        :label="item.title"
        :name="item.name">
      </el-tab-pane>
    </el-tabs>
    <keep-alive>
      <component :is = "activeName" :allNode="allNode" @refresh="refresh"></component>
    </keep-alive>
  </div>
</template>
<script>
  import entranceNode from './entranceNode/index.vue'
  import collectionNumNode from './collectionNumNode/index.vue'
  import skillGroupNode from './skillGroupNode/index.vue'
  import keyWordNode from './keyWordNode.vue'
  import areaNode from './areaNode.vue'
  import agentNode from './agentNode/index.vue'
  import timeNode from './timeNode/index.vue'
  import robotNode from './robotNode/index.vue'
  import leavemsgNode from './leaveMsgNode/index.vue'
  import welcomeNode from './welcomeNode/index.vue'
  import custRouteNode from './custRouteNode/index.vue'
  import * as types from '@modules/config/channelConfig/webchatSchdule/mutation-types.js'
  import { deepClone } from '@utils/m7Utils.js'

  export default{
    name: 'nodeManagement',
    data () {
      return {
        activeName: 'entranceNode',
        editableTabs: [
          {title: this.$t('configLazyLoad.process.node1'), name: 'entranceNode'},
          {title: this.$t('configLazyLoad.process.node2'), name: 'custRouteNode'},
          {title: this.$t('configLazyLoad.process.node3'), name: 'collectionNumNode'},
          {title: this.$t('configLazyLoad.process.node4'), name: 'skillGroupNode'},
//          {title: this.$t('configLazyLoad.process.node5'), name: 'keyWordNode'},
//          {title: this.$t('configLazyLoad.process.node6'), name: 'areaNode'},
//          {title: this.$t('configLazyLoad.process.node7'), name: 'agentNode'},
          {title: this.$t('configLazyLoad.process.node8'), name: 'timeNode'},
          {title: this.$t('configLazyLoad.process.node9'), name: 'robotNode'},
          {title: this.$t('configLazyLoad.process.node10'), name: 'leavemsgNode'},
          {title: this.$t('configLazyLoad.process.node11'), name: 'welcomeNode'}
        ],
        allNode: []
      }
    },
    watch: {
      reloadNode () {
        this.refresh()
      }
    },
    computed: {
      reloadNode () {
        return this.$store.state.config.channelConfig.webchatSchdule.reloadNode
      }
    },
    methods: {
      refresh () {
        let data = {}
        this.$store.dispatch('getNodeList', data).then((res) => {
          if (res.success) {
            this.allNode = deepClone(res.data)
            let data = this.allNode
            this.$store.commit(types.SET_ALL_WEBCHAT_SCHDULE_NODE_LIST, data)
            let entranceArr = []
            let agentArr = []
            let extenArr = []
            let leavemsgArr = []
            let robotArr = []
            let welcomeArr = []
            let queueArr = []
            let timeArr = []
            this.allNode.forEach((item) => {
              if (item.type === 'entrance') {
                entranceArr.push(item)
              } else if (item.type === 'agent') {
                agentArr.push(item)
              } else if (item.type === 'exten') {
                extenArr.push(item)
              } else if (item.type === 'leavemsg') {
                leavemsgArr.push(item)
              } else if (item.type === 'robot') {
                robotArr.push(item)
              } else if (item.type === 'welcome') {
                welcomeArr.push(item)
              } else if (item.type === 'queue') {
                queueArr.push(item)
              } else if (item.type === 'time') {
                timeArr.push(item)
              }
            })
            this.$store.commit(types.RESET_WEBCHAT_SCHDULE_LIST_NODE, {node: 'entranceNode', data: entranceArr})
            this.$store.commit(types.RESET_WEBCHAT_SCHDULE_LIST_NODE, {node: 'agentNode', data: agentArr})
            this.$store.commit(types.RESET_WEBCHAT_SCHDULE_LIST_NODE, {node: 'extenNode', data: extenArr})
            this.$store.commit(types.RESET_WEBCHAT_SCHDULE_LIST_NODE, {node: 'leavemsgNode', data: leavemsgArr})
            this.$store.commit(types.RESET_WEBCHAT_SCHDULE_LIST_NODE, {node: 'robotNode', data: robotArr})
            this.$store.commit(types.RESET_WEBCHAT_SCHDULE_LIST_NODE, {node: 'welcomeNode', data: welcomeArr})
            this.$store.commit(types.RESET_WEBCHAT_SCHDULE_LIST_NODE, {node: 'queueNode', data: queueArr})
            this.$store.commit(types.RESET_WEBCHAT_SCHDULE_LIST_NODE, {node: 'timeNode', data: timeArr})
          }
        })
      }
    },
    components: {
      entranceNode,
      collectionNumNode,
      skillGroupNode,
      keyWordNode,
      areaNode,
      agentNode,
      timeNode,
      robotNode,
      leavemsgNode,
      welcomeNode,
      custRouteNode
    },
    beforeMount () {
      this.refresh()
    }
  }
</script>
<style lang="stylus" scoped>
.webchat_node_management
  padding 14px
</style>
